<template>
	<view class="consultation-page">
		<!-- 加载中状态 -->
				<view v-if="loading" class="loading-indicator">
					加载中...
				</view>
		<view v-else-if="OrderData.length" class="consultation-card" v-for="(order, index) in OrderData" :key="index" @click="toOrderDetail(order)">
			<view class="title-time">
				<text>咨询记录</text>
				<text v-if="order.submit_status == 1" class="time" style="color: #409eff;">已提交</text>
				<text v-if="order.submit_status == 2" class="time" style="color: #e63345;">待支付 {{ order?.countdown }}
				</text>
				<text v-if="order.submit_status == 3" class="time" style="color: #717171;">待出行</text>
				<text v-if="order.submit_status == 4" class="time" style="color: #67c23a;">已出行</text>
				<text v-if="order.submit_status == 5" class="time" style="color: #e7a441;">退款中</text>
				<text v-if="order.submit_status == 6" class="time" style="color: #67c23a;">交易完成</text>
				<text v-if="order.submit_status == 7" class="time" style="color: #409eff;">退款成功</text>
				<text v-if="order.submit_status == 8" class="time" style="color: #e63345;">拒绝退款</text>
			</view>
			<view class="consultation-info">
				<view>
					<text class="title">目的地</text>
					<text class="content">{{ order.order_name }}</text>
				</view>
				<view>
					<text class="title">出行时间</text>
					<text class="info">{{ formatDate(order.arrival_time) }}</text>
				</view>
				<view>
					<text class="title">备注</text>
					<text class="info">{{ order.order_remark || '暂无' }}</text>
				</view>
			</view>
			<view class="consultation-info footer-info">
				<view>
					<text class="title">联系人</text>
					<text class="info">{{ order.user_name }} {{ order.user_number }}</text>
				</view>
				<view>
					<text class="title">出发地点</text>
					<text class="info">{{ order.departure_location }}</text>
				</view>
				<view>
					<text class="title">咨询单号</text>
					<text class="info">{{ order.order_number }}</text>
				</view>
				<view>
					<text class="title">下单时间</text>
					<text class="info">{{ order.create_time }}</text>
				</view>
				<view>
					<text class="title">出行价格</text>
					<text v-if="order.order_price" class="info">{{ `${order.order_price}￥`   }}</text>
					<text v-else class="info">等待客服报价</text>
				</view>
			</view>
			<view class="card-bottom">
				<button open-type="contact" session-from="userPage">联系客服</button>
				<button class="Pay-Now"
					v-if="order.order_price && order.submit_status ==2 && order.countdown !== '已过期'">立即付款</button>
				<button class="Pay-Now-dai" v-if="order.order_price && order.submit_status ==3">待出行</button>
			</view>
		</view>
		<view v-else class="no-data-tip" >
			暂无数据
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watchEffect,
		onMounted,
		watch,
		onUnmounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		getConsultationOrder
	} from '@/config/API/user';
	import {
		formatSpecificTime,
		formatDate
	} from '@/config/CaDateObject.js'
	const OrderData = ref([]);
const loading = ref(true); // 添加加载状态标识
	onShow(async () => {
		const userid = uni.getStorageSync('userInfo').id;
		try {
			loading.value = true; // 开始加载时设置为true
			const resData = await getConsultationOrder(userid);
			if(resData.data !== null){
				OrderData.value = resData.data.map(item => ({
					...item,
					countdown: null,
					countdownInterval: null,
				}));
				console.log('获取数据成功', OrderData.value);
			}
			
		} catch (e) {
			console.log('获取数据错误', e);
		}finally {
		loading.value = false; // 结束加载后设置为false
	}
	});
	// 倒计时函数
	const startCountdown = (item) => {
		if (item.submit_status !== 2 || item.countdown === '已过期' || item.countdownInterval) return;

		const orderHandleTimeUTC = Date.parse(item.create_time.replace(/-/g, '/')); // 处理时间格式
		const deadline = orderHandleTimeUTC + 24 * 60 * 60 * 1000; // 24小时后的时间戳

		const updateCountdown = () => {
			const nowUTC = Date.now();
			const remainingTime = deadline - nowUTC;

			if (remainingTime <= 0) {
				item.countdown = '已过期';
				clearInterval(item.countdownInterval);
				item.countdownInterval = null;
			} else {
				const hours = Math.floor(remainingTime / 1000 / 60 / 60);
				const minutes = Math.floor((remainingTime / 1000 / 60) % 60);
				const seconds = Math.floor((remainingTime / 1000) % 60);
				item.countdown =
					`${hours.toString().padStart(2, '0')} 小时 ${minutes.toString().padStart(2, '0')} 分 ${seconds.toString().padStart(2, '0')} 秒`;
			}
		};

		item.countdownInterval = setInterval(updateCountdown, 1000);
		updateCountdown(); // 立即更新一次
	};

	// 启动所有订单的倒计时
	const startAllCountdowns = () => {
		OrderData.value.forEach(item => {
			startCountdown(item);
		});
	};

	// 监听 OrderData 的变化并启动倒计时
	watch(() => OrderData.value, (newVal) => {
		startAllCountdowns();
	}, {
		immediate: true
	});

	// 清理定时器
	onUnmounted(() => {
		OrderData.value.forEach(item => {
			if (item.countdownInterval) {
				clearInterval(item.countdownInterval);
				item.countdownInterval = null;
			}
		});
	});

	// 在组件挂载时启动所有倒计时
	onMounted(() => {
		startAllCountdowns();
	});
	const toOrderDetail = (order) => {
		uni.navigateTo({
			url: `/myselfSubpages/customizedDetail/customizedDetail?customized_id=${order.customized_id}`
		})
		// if (order.submit_status == 1 ) {
		// 	uni.showToast({
		// 		title: '等待客服报价',
		// 		icon: 'none'
		// 	})
		// } else if( order?.countdown == '已过期'){
		// 	uni.showToast({
		// 		title: '订单已过期',
		// 		icon: 'none'
		// 	})
		// }else{
		// 	uni.navigateTo({
		// 		url: `/myselfSubpages/customizedDetail/customizedDetail?customized_id=${order.customized_id}`
		// 	})
		// }

	}
</script>


<style lang="scss" scoped>
	.consultation-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f6f7;
		padding: 25rpx;
		padding-bottom: 120rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 30rpx;

		.consultation-card {
			width: 100%;
			min-height: 300rpx;
			border-radius: 25rpx;
			background-color: #fff;
			padding: 26rpx 20rpx;
			box-sizing: border-box;

			.title-time {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #e8e8e8;
				padding-bottom: 26rpx;

				text {
					font-size: 28rpx;
					font-weight: 600;
				}

				.time {
					font-size: 26rpx;
					color: #808080;
					font-weight: 500;
				}
			}

			.consultation-info {
				width: 100%;
				border-bottom: 2rpx solid #e8e8e8;

				view {
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					gap: 50rpx;

					text {
						font-size: 26rpx;
					}

					.title {
						min-width: 110rpx;
						max-width: 110rpx;
						color: #808080;
					}

					.content {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.info {
						min-width: calc(100% - 150rpx);
						max-width: calc(100% - 150rpx);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.footer-info {
				border-bottom: 0;
			}

			.card-bottom {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				gap: 20rpx;

				button {
					width: 150rpx;
					height: 60rpx;
					line-height: 60rpx;
					background-color: transparent;
					padding: 0;
					margin: 0;
					font-size: 26rpx;
					border: 1rpx solid #cccccc;

					&::after {
						border: none;
					}
				}

				.Pay-Now {
					color: #fff;
					background-color: #000;
					border: 1rpx solid #000;
				}

				.Pay-Now-dai {
					color: #fff;
					background-color: #e7a441;
					border: 1rpx solid #e7a441;
				}
			}
		}
	}
	/* 样式部分 */
	.loading-indicator {
		text-align: center;
		padding: 20px;
	}
	.no-data-tip {
		text-align: center;
		padding: 20px;
	}
	
	.no-data-tip button {
		margin-top: 10px;
	}
</style>